<template>
  <div class="live-directory">
    <div class="live-wrap" v-for="(item, index) in liveDirectory" :key="index">
      <h3 class="chapter btn">
        <span>{{ item.class_name }}</span
        ><img
          class="fr"
          src="../../../../../../assets/image/onlineStudent/top-ico.png"
          alt=""
        />
      </h3>
      <ul class="live">
        <li v-for="(kecis, index) in item.keci" :key="index" class="btn">
          <div class="left">
            <div class="num">{{ index + 1 }}</div>
            <div>
              <div class="name">{{ kecis.name }}</div>
              <div class="info">
                <span>回放</span>
                <span> | {{ kecis.times }} | </span>
                <span>{{ kecis.teacher_name }}</span>
              </div>
            </div>
          </div>
          <div class="right" @click="materialsBoxShow = true">
            <img
              src="../../../../../../assets/image/onlineStudent/datum-ico.png"
              alt=""
            />
            资料
          </div>
        </li>
      </ul>
      <div class="more btn">查看更多</div>
    </div>
    <div v-if="materialsBoxShow" class="materials-box">
      <div class="container-fluid">
        <div class="container">
          <el-row class="flex-center">
            <el-col :span="12" class="view flex-center">
              <div style="width:90%">
                <div class="title">
                  <div>资料</div>
                  <div @click="materialsBoxShow = false" class="close btn">
                    <img
                      src="../../../../../../assets/image/onlineStudent/materials-close.png"
                      alt=""
                    />
                  </div>
                </div>
                <ul class="main">
                  <li>
                    <div class="item">
                      <div class="left">
                        <span class="num">01</span>
                        <span class="name">三合一建筑分类和耐火等级.pdf</span>
                      </div>
                      <div class="right">
                        <img
                          class="play btn"
                          src="../../../../../../assets/image/onlineStudent/materials-play.png"
                          alt=""
                        />
                        <img
                          class="download btn"
                          src="../../../../../../assets/image/onlineStudent/materials-download.png"
                          alt=""
                        />
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    this.getLiveDirectory();
  },
  data() {
    return {
      materialsBoxShow:false,
      liveDirectory:[]
    }
  },
  methods:{
    getLiveDirectory(){
      this.$axios.post("/course/livearr", {
        school_dns:'testwo.admin.longde999.cn',
        id:this.$route.query.id,
        nature:this.$route.query.nature
      }).then(res => {
        this.liveDirectory = res.data;
      });
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../../../common/index.less';
.live-directory {
  .live-wrap {
    .chapter();
    .live {
      li {
        .flex(space-between, center);
        padding: 20px 10px;
        border-bottom: solid 1px #e4e7ed;
        .left {
          .flex();
          .num {
            margin-right: 20px;
            color: #666666;
          }
          .name {
            margin-bottom: 5px;
            color: #333333;
          }
          .info {
            font-size: 12px;
            color: #999999;
          }
        }
        .right {
          .flex('', center);
          color: #27a4fe;
          img {
            margin-right: 5px;
          }
        }
      }
    }
    .more {
      margin: 30px;
      text-align: center;
      color: #27a4fe;
    }
  }
  .materials-box {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);

    .view {
      position: relative;
      margin: auto;
      text-align: center;
      background: #ffffff;
      border-radius: 20px;
      padding: 20px 0;
      color: #666666;
    }
    .title {
      .flex(space-between, center);
    }
    .main {
      height: 300px;
      li {
        .flex();
        .before(10px, 0);
        margin-top: 20px;
        padding: 10px 0;
        background: #f5f6f6;
        .item {
          width: 100%;
          .flex(space-between, center);
          .left{
            .num{
              margin: 0 10px;
            }

          }
          .right{
            .play{
              margin: 0 10px;
            }
            .download{
              margin-right: 10px;
            }
          }
        }
      }
    }
  }
}
</style>
